<template>
    <div class="container">
        <!-- 头部内容 -->
        <div class="header">
            <van-icon @click="goBack" name="arrow-left" class="header-left" size="30" />
            填写服务订单
        </div>
        <!-- 进度条 -->
        <status-bar :item="0" />
        <!-- 单元格信息 -->
        <van-cell class="cell">
            <template #title>
                <van-image width="25" height="25" :src="createInfo.service.serviceImg" />
                <span class="server-name">{{ createInfo.service.serviceName }}</span>
            </template>
            <template #default>
                <div class="service-text">服务内容</div>
            </template>
        </van-cell>
        <van-cell-group class="cell">
            <!-- 就诊医院 -->
            <van-cell>
                <template #title>就诊医院</template>
                <template #default>
                    <div @click="showHospital = true">
                        {{ form.hospital_name || "请选择就诊医院" }}
                        <van-icon name="arrow" />
                    </div>
                </template>
            </van-cell>
            <!-- 就诊时间 -->
            <van-cell>
                <template #title>就诊时间</template>
                <template #default>
                    <div @click="showStartTime = true">
                        {{ currentDate || "请选择就诊时间" }}
                        <van-icon name="arrow" />
                    </div>
                </template>
            </van-cell>
            <!-- 陪诊师 -->
            <van-cell>
                <template #title>陪诊师</template>
                <template #default>
                    <div @click="showCompanion = true">
                        {{ companionName || "请选择陪诊师" }}
                        <van-icon name="arrow" />
                    </div>
                </template>
            </van-cell>
            <!-- 接送地址 -->
            <van-cell>
                <template #title>接送地址</template>
                <template #default>
                    <van-field v-model="form.receiveAddress" input-align="right" class="text" placeholder="请填写接送地址" />
                </template>
            </van-cell>
            <!-- 联系电话 -->
            <van-cell>
                <template #title>联系电话</template>
                <template #default>
                    <van-field v-model="form.tel" input-align="right" class="text" placeholder="请填写联系电话" />
                </template>
            </van-cell>
        </van-cell-group>
        <!-- 服务需求 -->
        <van-cell-group title="服务需求" class="cell">
            <van-field v-model="form.demand" style="height: 100px;" class="text" placeholder="请简单描述您要就诊的科室.." />
        </van-cell-group>
        <!-- 提交按钮 -->
        <van-button @click="submit" class="submit" type="primary" size="large">提交订单</van-button>

        <!-- 选择就诊医院的弹出层 -->
        <van-popup v-model:show="showHospital" position="bottom" :style="{ height: '30%' }">
            <van-picker :columns="showHospitalColumns" @confirm="showHospitalConfirm" @cancel="showHospital = false" />
        </van-popup>
        <!-- 选择就诊时间的弹出层 -->
        <van-popup v-model:show="showStartTime" position="bottom" :style="{ height: '30%' }">
            <van-date-picker title="选择日期" :min-date="minDate" @confirm="showTimeConfirm"
                @cancel="showStartTime = false" />
        </van-popup>
        <!-- 选择陪诊师弹出层 -->
        <van-popup v-model:show="showCompanion" position="bottom" :style="{ height: '30%' }">
            <van-picker :columns="showCompanionColumns" @confirm="showCompanionConfirm"
                @cancel="showCompanion = false" />
        </van-popup>
        <!-- 支付二维码弹窗-->
        <van-dialog v-model:show="showCode" :show-confirm-button="false">
            <van-icon name="cross" class="close" @click="closeCode"/>
            <div>微信支付</div>
            <van-image width="150" height="150" :src="codeImg" />
            <div>请使用本人微信扫码二维码</div>
        </van-dialog>
    </div>
</template>

<script setup>
import Qrcode from 'qrcode'
import statusBar from '../../components/statusBar.vue';
import { ref, reactive, getCurrentInstance, onMounted, computed } from 'vue'
import { useRouter } from 'vue-router';

//router实例
const router = useRouter()

//获取当前vue实例
const { proxy } = getCurrentInstance()

//创建订单的数据
const createInfo = reactive({
    companion: [],
    hospitals: [],
    service: {}
})

//控制选择医院弹出层的显示与隐藏
const showHospital = ref(false)

//选择医院弹出层数据
const showHospitalColumns = computed(() => {
    return createInfo.hospitals.map(item => {
        return { 'text': item.name, 'value': item.id }
    })
})

//表单数据
const form = reactive({})

//选择的当前时间
const currentDate = ref()

//限制的最小时间
const minDate = new Date()

//控制选择时间弹出层的显示与隐藏
const showStartTime = ref(false)

//控制选择陪诊师弹出层的显示与隐藏
const showCompanion = ref(false)

//选择陪诊师弹出层数据
const showCompanionColumns = computed(() => {
    return createInfo.companion.map(item => {
        return { 'text': item.name, 'value': item.id }
    })
})

//选择的陪诊师
const companionName = ref()

//控制二维码弹出框的显示与隐藏
const showCode = ref(false)

//二维码图片
const codeImg = ref()

//挂载
onMounted(async () => {
    //获取创建订单的数据
    const { data } = await proxy.$api.h5Companion()
    Object.assign(createInfo, data.data)
    console.log('createInfo', createInfo);

})

//点击左侧图标回退
const goBack = () => {
    router.go(-1)
}

//选择就诊医院
const showHospitalConfirm = (item) => {
    form.hospital_id = item.selectedOptions[0].value
    form.hospital_name = item.selectedOptions[0].text
    //关闭选择医院弹出层窗口
    showHospital.value = false
}

//选择就诊时间
const showTimeConfirm = (item) => {
    const dateStr = item.selectedValues.join('-')
    currentDate.value = dateStr
    form.starttime = new Date(dateStr).getTime()
    //关闭选择就诊时间弹出层窗口
    showStartTime.value = false
}

//选择陪诊师
const showCompanionConfirm = (item) => {
    form.companion_id = item.selectedOptions[0].value
    companionName.value = item.selectedOptions[0].text
    //关闭选择陪诊师弹出层窗口
    showCompanion.value = false
}

//提交表单
const submit = async () => {
    // 表单校验
    const params = ['hospital_id', 'hospital_name', 'demand', 'companion_id', 'receiveAddress', 'tel', 'starttime']
    for (const i of params) {
        if (!form[i]) {
            return showNotify({ type: 'danger', message: '请填写好每一项内容' });
        }
    }
    //创建订单
    const { data } = await proxy.$api.createOrder(form)
    //生成二维码
    Qrcode.toDataURL(data.data.wx_code).then((url) => {
        codeImg.value = url
    })
    //打开二维码弹窗
    showCode.value = true
    //成功提示
    showNotify({ type: 'success', message: '提交成功' });
}

//关闭二维码弹窗
const closeCode = ()=>{
    //关闭弹窗
    showCode.value = false
    //跳转到订单页
    router.push('/order')
}

</script>
<style lang='less' scoped>
.container {
    background-color: #f0f0f0;
    height: 100vh;
}

.header {
    padding: 10px 0;
    text-align: center;
    line-height: 30px;
    font-size: 15px;

    .header-left {
        float: left;
    }
}

.cell {
    width: 95%;
    margin: 5px auto;
    background-color: #fff;

    ::v-deep(.van-field__control) {
        color: var(--van-cell-value-color);
    }

    ::v-deep(.van-cell__title) {
        display: flex;
        align-items: center;
    }

    .server-name {
        margin-left: 10px;
    }
}

.service-text {
    background: url() no-repeat center center;
    background-size: 20px;
}

.sumbit {
    position: absolute;
    bottom: 0;
}

::v-deep(.van-dialog__content) {
    text-align: center;
    padding: 20px;

    .close {
        position: absolute;
        left: 20px;
    }
}
</style>